<template>
  <div @click="showActivity" style="width: 100%">
    <el-card :body-style="{ padding: '0px', minHeight: '30vh' }" shadow="hover">
      <img :src="activityInfo.activityImg" class="image" alt="" />
      <div style="padding: 14px">
        <span style="font-size: x-large; font-weight: bolder">{{
          activityInfo.activityName
        }}</span>
        <div class="bottom">
          <span>{{ activityInfo.site }}</span>
          <span>{{ activityInfo.sponsor }}</span>
        </div>
      </div>
    </el-card>
    <ParticipateActivity ref="participate" :activity-info="activityInfo" />
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { PropType } from "vue";
import { IActivity } from "@/api/business/activity/types";
import ParticipateActivity from "./participate-activity.vue";

//-----------组件变量-----------
const props = defineProps({
  //子组件接收父组件传递过来的值
  activityInfo: {
    type: Object as PropType<IActivity>,
    required: true,
  },
});
const participate = ref();

//-----------组件操作-----------
const showActivity = () => {
  participate.value.showDialog();
};
</script>

<style scoped lang="scss">
.bottom {
  margin-top: 13px;
  line-height: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.image {
  width: 100%;
  height: 20vh;
  display: block;
}
</style>
